<template>
  <div id="J_ContBox" class="m-content-box">
    <div id="bodyTest" class="body-test__setting">
      <div id="bodyTestNormalField">
        <div class="body-test__setting-normal">
          <div class="body-test-title">基本体测数据<span class="body-test-title__desc">系统自带的体测维度，不需要可以编辑为不显示</span></div>
          <div class="body-test-item">
            <div class="body-test-item__hd">
              <div class="body-test-item__name">维度名称</div>
              <div class="body-test-item__unit">单位</div>
              <div class="body-test-item__status">状态</div>
              <div class="body-test-item__action">操作</div>
            </div>
            <div id="basics" class="body-test-item__bd">
              <div class="body-test-item__bd-row" data-index="0">
                <div class="body-test-item__name">身高</div>
                <div class="body-test-item__unit">cm</div>
                <div class="body-test-item__status">正常显示</div>
                <div class="body-test-item__action">
                  <el-switch v-model="switchlist[0]" />
                </div>
              </div>

              <div class="body-test-item__bd-row" data-index="1">
                <div class="body-test-item__name">体重</div>
                <div class="body-test-item__unit">kg</div>
                <div class="body-test-item__status">正常显示</div>
                <div class="body-test-item__action">
                  <el-switch v-model="switchlist[1]" />
                </div>
              </div>

              <div class="body-test-item__bd-row" data-index="2">
                <div class="body-test-item__name">体型</div>
                <div class="body-test-item__unit" />
                <div class="body-test-item__status">正常显示</div>
                <div class="body-test-item__action">
                  <el-switch v-model="switchlist[2]" />
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="body-test__setting-normal">
          <div class="body-test-title">围度数据</div>
          <div class="body-test-item">
            <div class="body-test-item__hd">
              <div class="body-test-item__name">维度名称</div>
              <div class="body-test-item__unit">单位</div>
              <div class="body-test-item__status">状态</div>
              <div class="body-test-item__action">操作</div>
            </div>
            <div id="girth" class="body-test-item__bd">
              <div class="body-test-item__bd-row" data-index="0">
                <div class="body-test-item__name">上臂围(左)</div>
                <div class="body-test-item__unit">cm</div>
                <div class="body-test-item__status">正常显示</div>
                <div class="body-test-item__action">
                  <el-switch v-model="switchlist[3]" />
                </div>
              </div>

              <div class="body-test-item__bd-row" data-index="1">
                <div class="body-test-item__name">上臂围(右)</div>
                <div class="body-test-item__unit">cm</div>
                <div class="body-test-item__status">正常显示</div>
                <div class="body-test-item__action">
                  <el-switch v-model="switchlist[4]" />
                </div>
              </div>

              <div class="body-test-item__bd-row" data-index="2">
                <div class="body-test-item__name">胸围</div>
                <div class="body-test-item__unit">cm</div>
                <div class="body-test-item__status">正常显示</div>
                <div class="body-test-item__action">
                  <el-switch v-model="switchlist[5]" />
                </div>
              </div>

              <div class="body-test-item__bd-row" data-index="3">
                <div class="body-test-item__name">腰围</div>
                <div class="body-test-item__unit">cm</div>
                <div class="body-test-item__status">正常显示</div>
                <div class="body-test-item__action">
                  <el-switch v-model="switchlist[6]" />
                </div>
              </div>

              <div class="body-test-item__bd-row" data-index="4">
                <div class="body-test-item__name">臀围</div>
                <div class="body-test-item__unit">cm</div>
                <div class="body-test-item__status">正常显示</div>
                <div class="body-test-item__action">
                  <el-switch v-model="switchlist[7]" />
                </div>
              </div>

              <div class="body-test-item__bd-row" data-index="5">
                <div class="body-test-item__name">大腿围(左)</div>
                <div class="body-test-item__unit">cm</div>
                <div class="body-test-item__status">正常显示</div>
                <div class="body-test-item__action">
                  <el-switch v-model="switchlist[8]" />
                </div>
              </div>

              <div class="body-test-item__bd-row" data-index="6">
                <div class="body-test-item__name">大腿围(右)</div>
                <div class="body-test-item__unit">cm</div>
                <div class="body-test-item__status">正常显示</div>
                <div class="body-test-item__action">
                  <el-switch v-model="switchlist[9]" />
                </div>
              </div>

              <div class="body-test-item__bd-row" data-index="7">
                <div class="body-test-item__name">小腿围(左)</div>
                <div class="body-test-item__unit">cm</div>
                <div class="body-test-item__status">正常显示</div>
                <div class="body-test-item__action">
                  <el-switch v-model="switchlist[10]" />
                </div>
              </div>

              <div class="body-test-item__bd-row" data-index="8">
                <div class="body-test-item__name">小腿围(右)</div>
                <div class="body-test-item__unit">cm</div>
                <div class="body-test-item__status">正常显示</div>
                <div class="body-test-item__action">
                  <el-switch v-model="switchlist[11]" />
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="body-test__setting-normal">
          <div class="body-test-title">肌肉脂肪数据</div>
          <div class="body-test-item">
            <div class="body-test-item__hd">
              <div class="body-test-item__name">维度名称</div>
              <div class="body-test-item__unit">单位</div>
              <div class="body-test-item__status">状态</div>
              <div class="body-test-item__action">操作</div>
            </div>
            <div id="modify" class="body-test-item__bd">
              <div class="body-test-item__bd-row" data-index="0">
                <div class="body-test-item__name">BMI</div>
                <div class="body-test-item__unit" />
                <div class="body-test-item__status">正常显示</div>
                <div class="body-test-item__action">
                  <el-switch v-model="switchlist[12]" />
                </div>
              </div>

              <div class="body-test-item__bd-row" data-index="1">
                <div class="body-test-item__name">脂肪</div>
                <div class="body-test-item__unit">kg</div>
                <div class="body-test-item__status">正常显示</div>
                <div class="body-test-item__action">
                  <el-switch v-model="switchlist[13]" />
                </div>
              </div>

              <div class="body-test-item__bd-row" data-index="2">
                <div class="body-test-item__name">骨骼肌率</div>
                <div class="body-test-item__unit">%</div>
                <div class="body-test-item__status">正常显示</div>
                <div class="body-test-item__action">
                  <el-switch v-model="switchlist[14]" />
                </div>
              </div>

              <div class="body-test-item__bd-row" data-index="3">
                <div class="body-test-item__name">骨量</div>
                <div class="body-test-item__unit">kg</div>
                <div class="body-test-item__status">正常显示</div>
                <div class="body-test-item__action">
                  <el-switch v-model="switchlist[15]" />
                </div>
              </div>

              <div class="body-test-item__bd-row" data-index="4">
                <div class="body-test-item__name">肌肉量</div>
                <div class="body-test-item__unit">kg</div>
                <div class="body-test-item__status">正常显示</div>
                <div class="body-test-item__action">
                  <el-switch v-model="switchlist[16]" />
                </div>
              </div>

              <div class="body-test-item__bd-row" data-index="5">
                <div class="body-test-item__name">去脂体重</div>
                <div class="body-test-item__unit">kg</div>
                <div class="body-test-item__status">正常显示</div>
                <div class="body-test-item__action">
                  <el-switch v-model="switchlist[17]" />
                </div>
              </div>

              <div class="body-test-item__bd-row" data-index="6">
                <div class="body-test-item__name">皮下脂肪率</div>
                <div class="body-test-item__unit">%</div>
                <div class="body-test-item__status">正常显示</div>
                <div class="body-test-item__action">
                  <el-switch v-model="switchlist[18]" />
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="body-test__setting-normal">
          <div class="body-test-title">人体成分数据</div>
          <div class="body-test-item">
            <div class="body-test-item__hd">
              <div class="body-test-item__name">维度名称</div>
              <div class="body-test-item__unit">单位</div>
              <div class="body-test-item__status">状态</div>
              <div class="body-test-item__action">操作</div>
            </div>
            <div id="body_composition" class="body-test-item__bd">
              <div class="body-test-item__bd-row" data-index="0">
                <div class="body-test-item__name">体脂</div>
                <div class="body-test-item__unit">%</div>
                <div class="body-test-item__status">正常显示</div>
                <div class="body-test-item__action">
                  <el-switch v-model="switchlist[19]" />
                </div>
              </div>

              <div class="body-test-item__bd-row" data-index="1">
                <div class="body-test-item__name">体水分</div>
                <div class="body-test-item__unit">%</div>
                <div class="body-test-item__status">正常显示</div>
                <div class="body-test-item__action">
                  <el-switch v-model="switchlist[20]" />
                </div>
              </div>

              <div class="body-test-item__bd-row" data-index="2">
                <div class="body-test-item__name">蛋白质</div>
                <div class="body-test-item__unit">%</div>
                <div class="body-test-item__status">正常显示</div>
                <div class="body-test-item__action">
                  <el-switch v-model="switchlist[21]" />
                </div>
              </div>

              <div class="body-test-item__bd-row" data-index="3">
                <div class="body-test-item__name">无机盐</div>
                <div class="body-test-item__unit">%</div>
                <div class="body-test-item__status">正常显示</div>
                <div class="body-test-item__action">
                  <el-switch v-model="switchlist[22]" />
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="body-test__setting-normal">
          <div class="body-test-title">健康数据</div>
          <div class="body-test-item">
            <div class="body-test-item__hd">
              <div class="body-test-item__name">维度名称</div>
              <div class="body-test-item__unit">单位</div>
              <div class="body-test-item__status">状态</div>
              <div class="body-test-item__action">操作</div>
            </div>
            <div id="healthy" class="body-test-item__bd">
              <div class="body-test-item__bd-row" data-index="0">
                <div class="body-test-item__name">基础代谢</div>
                <div class="body-test-item__unit">kcal</div>
                <div class="body-test-item__status">正常显示</div>
                <div class="body-test-item__action">
                  <el-switch v-model="switchlist[23]" />
                </div>
              </div>

              <div class="body-test-item__bd-row" data-index="1">
                <div class="body-test-item__name">内脏脂肪等级</div>
                <div class="body-test-item__unit" />
                <div class="body-test-item__status">正常显示</div>
                <div class="body-test-item__action">
                  <el-switch v-model="switchlist[24]" />
                </div>
              </div>

              <div class="body-test-item__bd-row" data-index="2">
                <div class="body-test-item__name">脂肪肝风险等级</div>
                <div class="body-test-item__unit" />
                <div class="body-test-item__status">正常显示</div>
                <div class="body-test-item__action">
                  <el-switch v-model="switchlist[25]" />
                </div>
              </div>

              <div class="body-test-item__bd-row" data-index="3">
                <div class="body-test-item__name">健康评分</div>
                <div class="body-test-item__unit" />
                <div class="body-test-item__status">正常显示</div>
                <div class="body-test-item__action">
                  <el-switch v-model="switchlist[26]" />
                </div>
              </div>

              <div class="body-test-item__bd-row" data-index="4">
                <div class="body-test-item__name">体年龄</div>
                <div class="body-test-item__unit">岁</div>
                <div class="body-test-item__status">正常显示</div>
                <div class="body-test-item__action">
                  <el-switch v-model="switchlist[27]" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="body-test__setting-custom">
        <div class="body-test-title">自定义体测数据<span class="body-test-title__desc">可以添加更多维度</span></div>
        <div class="body-test-item">
          <div class="body-test-item__hd">
            <div class="body-test-item__name">维度名称</div>
            <div class="body-test-item__unit">单位</div>
            <div class="body-test-item__status">状态</div>
            <div class="body-test-item__action">操作</div>
          </div>
          <div id="bodyTestCustomField" class="body-test-item__bd" />
          <div id="addCustomItem" class="add-source" style=""><em class="icon icon-add" />新增</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getXuan } from '@/utils/limits.js'
import { mapGetters } from 'vuex' // Secondary package based on el-pagination

export default {
  name: 'ArticleList',
  components: {
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      is_show: false,
      radio_tj: '1',
      jsctyz: false,
      dzhtqs: true,
      switchlist: [
        true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true
      ],
      course: ''
    }
  },
  computed: {
    ...mapGetters([
      'permission_routes',
      'roles'
    ])
  },
  created() {
    var xuanList = [{
      name: '体测模板',
      url: '/system/bodyTest',
      pd: true
    }]
    var xuanList1 = getXuan(xuanList, this.roles)
    this.$store.dispatch('user/changeXuan', {
      key: 'xuanList',
      value: xuanList1
    })
    this.$store.dispatch('user/changeXuan', {
      key: 'xuan',
      value: 0
    })
  },
  methods: {

  }
}
</script>

<style scoped>
.m-content-box {
  position: relative;
  padding: 30px 63px;
  font-size:14px;
}
.body-test__setting-normal {
  margin-bottom: 30px;
}
.body-test-title {
  margin-bottom: 15px;
}
.body-test-title__desc {
  display: inline-block;
  margin-left: 10px;
  font-size: 12px;
  color: #f49352;
}
.body-test-item__hd {
  display: flex;
  padding: 0 10px 8px;
  font-size: 12px;
  color: #787878;
}
.body-test-item__name {
  flex: 1;
}
.body-test-item__unit, .body-test-item__status {
  width: 28.8%;
}
.body-test-item__unit, .body-test-item__status {
  width: 28.8%;
}
.body-test-item__action {
  width: 208px;
  line-height: 1;
}
.body-test-item__bd-row:nth-child(odd) {
  background: #f2f2f2;
}
.body-test-item__bd-row {
  display: flex;
  padding: 8px 10px;
  align-items: center;
}
</style>
